<!-- 上单统计日期 -->
<template>
    <div >
        <a-page-header
            style="border: 1px solid rgb(235, 237, 240);background:#fff"
            :title="`${storehouse}-${type == '0' ? '下单表' : '上单表'}`"
            @back="() => $router.go(-1)"
        >
            <div class='table-page-search-wrapper'>
                <a-form layout='inline'>
                <a-row :gutter='48'>
                        <a-col :md='16' :sm='24'>
                            <a-form-item label="统计日期">
                                <a-range-picker @change="onChange"  />
                            </a-form-item>
                        </a-col>
                        <a-col :md='8' :sm='24'>
                            <a-form-item>
                                <a-button type='primary' style="margin-right: 20px" @click="getData">查询</a-button>
                            <a-button icon="plus" @click="add()" v-if="type == '0'">下单新增</a-button>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>

            <a-table size="small" :columns="columns" :data-source="dataList" :loading="isload" :pagination="{ pageSize: 10, total: dataList.length ,showSizeChanger: true,}" border>
                <div slot="createTime" slot-scope="text,record">   
                    <div>{{record}}</div>
                </div>
                <template slot="operation" slot-scope="text, record">
                    <div class="editable-row-operations">
                        <a-button type="link" @click="goNext(record)">{{type == '0' ? '下单表' : '上单表'}}</a-button>
                    </div>
                </template>
            </a-table>
        </a-page-header>

        <!-- 下单新增 -->
        <a-modal
            title="下单新增"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                    <a-form-item label="商品信息" >
                        <a-select show-search  v-model="item.goodsId" @search="handleSearch" placeholder="请选择">
                            <a-select-option v-for="(itm) in goodDetailList" :value="itm.goodsId+','+itm.id+','+itm.goodsName+','+itm.cateName+','+itm.colorName+','+itm.grade+','+itm.specName+','+itm.remarks" :key="itm.id">{{itm.goodsName}}-{{itm.cateName}}-{{itm.colorName}}-{{itm.grade}}-{{itm.specName}}-{{itm.remarks}}</a-select-option>
                        </a-select>   
                    </a-form-item>
                    <a-form-item label="下单数量" >
                        <a-input v-model="item.purchaseQuantity" :placeholder="`请输入下单数量`" allow-clear ></a-input>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { queryGoodsPurchaseFormStatisticalDate , createGoodsPurchaseForm , queryGoodsDetail } from '@/api/newMall';
const columns = [
    {
        title: '统计日期',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        scopedSlots: { customRender: 'createTime' },
    },
    {
        title: '查看',
        key: 'operation',
        dataIndex: 'operation',
        align: 'center',
        scopedSlots: { customRender: 'operation' },
    },
]
export default {
    data () {
        return {
            brandId: this.global.brandId,
            storehouse: JSON.parse(localStorage.getItem('storehouseName')),
            storehouseId: JSON.parse(localStorage.getItem('storehouseId')),
            startStatisticalDate: '',
            endStatisticalDate: '',
            areaId: '0', // 固定商品区
            type: this.$route.query.type,
            dataList: [],
            isload: false,
            columns,
            confirmLoading: false,
            visible: false,
            item: {
                purchaseQuantity: '',
                goodsId: '',
            },
            goodDetailList: [],
        };
    },
    created(){
        this.getData();
        if(this.type == '0'){
            this.getGoodDetails();
        }
    },
    methods: {
        getData(){
            let _this = this;
            _this.isload = true;
            const params = {
                'brandId': _this.brandId,
                'storehouseId': _this.storehouseId,
                'startStatisticalDate': _this.startStatisticalDate,
                'endStatisticalDate': _this.endStatisticalDate,
                'type': _this.type,
            }
            queryGoodsPurchaseFormStatisticalDate(params)
            .then(res => {
                _this.isload = false;
                if(res.success){
                    _this.dataList = res.data;
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        onChange(date, dateString) {
            console.log(date, dateString);
            if(date.length != 0){
                this.startStatisticalDate = dateString[0];
                this.endStatisticalDate = dateString[1];
            }else{
                this.startStatisticalDate = '';
                this.endStatisticalDate = '';
            }
            this.getData()
        },
        goNext(item){
            // this.$router.push({ path: '/newMall/purchaseOrder',  query: {'statisticalDate': item}})
            if(this.type == '0'){
                this.$router.push({ path: '/newMall/purchase', query: {statisticalDate: item}})
            }else{
                this.$router.push({ path: '/newMall/purchaseOrder',query: {statisticalDate: item}})
            }
        },
        async handleSearch(goodsName){
            console.log(goodsName,'name')
            await this.getGoodDetails(goodsName);
        },
        // 获取商品详情列表
        getGoodDetails(goodsName){
            let _this = this;
            return new Promise((resolve,reject) => {
                const params = {
                    'brandId': _this.brandId,
                    'goodsName': goodsName,
                    'status': '1',
                    'page': 0,
                    'size': 99,
                }
                queryGoodsDetail(params)
                .then(res => {
                    if(res.success){
                        _this.goodDetailList = res.data.content;
                        resolve();
                    }else{
                        reject(res.errMessage)
                    }
                })
            })
        },
        // 新增下单
        add(){
            this.item.goodsId = undefined;
            this.item.purchaseQuantity = '';
            this.visible = true;
        },
        handleOk(){
            let _this = this;
            if(_this.item.goodsId === undefined){
                _this.$message.warning('请选择商品');
                return
            }
            if(_this.item.purchaseQuantity === ''){
                _this.$message.warning('请输入下单数量');
                return
            }
            _this.confirmLoading = true
            const params = {
                'brandId': _this.brandId,
                'storehouseId': _this.storehouseId,
                'areaId': _this.areaId,
                'goodsId': _this.item.goodsId.split(',')[0],
                'goodsDetailsId': _this.item.goodsId.split(',')[1],
                'purchaseQuantity': _this.item.purchaseQuantity,
            }
            createGoodsPurchaseForm(params)
            .then(res => {
                _this.confirmLoading = false
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '提交成功',
                        duration: 8,
                    })
                    _this.visible = false;
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
    }
}

</script>
<style scoped>

</style>